<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>axios请求拦截器</h1>
  <button id="btn">发送请求</button>
  <script>
    /* 
      创建一个axios实例 并配置这个实例
    
    */
    const myAxios2 = axios.create({
      baseURL: '/',
      headers: {},
      timeout: 10000
    })
    myAxios2.interceptors.request.use((c)=>{
      alert('请求拦截')
      return c
    },(err)=>{
      console.log(err);
      return Promise.reject(err)
    })
    const oBtn2 = document.getElementById('btn')
    oBtn2.onclick = async function(){
      const re = await myAxios2.get('/user',{
        params: {
          userId: '001'
        }
      })
      console.log(re);
    }
    // const myAxios = axios.create({
    //   baseURL: "/", //配置公共路径
    //   timeout: 10000, //配置超时事件
    //   headers: {} //配置请求头
    // })
    // myAxios.interceptors.request.use((c)=>{
    //   console.log(c);
    //   alert('请求拦截')
    //   return c
    // },(err)=>{
    //     return Promise.reject(err)
    // })
    // const oBtn1 = document.getElementById('btn')
    // oBtn1.onclick = async function(){
    //   try {
    //    const re1 = await myAxios.get('/user',{
    //       params: {
    //         userId: '001'
    //       }
    //     })
    //   } catch (e) {
    //     console.log(e.message);
    //   }
      
    // }
    //请求拦截器
    /* 
      use方法接受两个回调函数,正常都会进入到第一个回调函数中
      只有以下两种情况会触发异常处理的回调(了解):
        - use额外配置第三个参数options
        - 当同时设置多个同类型拦截器的时候,如果第二个拦截器中的处理出现错误,则会执行第一个拦截器中的异常处理函数
    */
    // myAxios.interceptors.request.use((config) => {
    //   console.log(config)
    //   //在请求拦截器中可以拿到axios的配置对象,配置对象中config.headers.common是请求头的配置
    //   alert("我要发请求啦");

    //   //最后一定要把config再返回出去(放行)
    //   return config;
    // }, (err) => {
    //   console.log(err);
    //   return Promise.reject(err)
    // });

    // const oBtn = document.getElementById('btn');
    // oBtn.onclick = async function () {
    //   try {
    //      const result = await myAxios.get("/uer", {
    //      params: {
    //         userId: "001"
    //       }
    //     })
    //     // console.log(result, "result");
    //   } catch (e) {
    //     console.log(e.message);
    //   }
     
    // }
  </script>
</body>
</html>